import React, { PureComponent } from 'react';
import { Modal, Form, Input, message, Select } from 'antd';
import PropTypes from 'prop-types';
import styles from '@/common/PateoTable/TableList.less';
import { getDicByCodeSort } from '@/utils/common';

const FormItem = Form.Item;
const { TextArea } = Input;
// @Form.create()
export default class SendMsgModal extends PureComponent {
  static contextTypes = {
    dicData: PropTypes.array,
  };
  state = {
  };

  componentWillMount() {
  }

  componentDidMount() {
    this.props.onRef(this);
  }


  componentWillReceiveProps() {
  }
  ok = (e) => {
    e.preventDefault();
    const { form, dispatch, handleCloseSend, url } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      dispatch({
        type: url,
        payload: fieldsValue,
        callback: (response) => {
          if (response.code !== '200' && response.code !== '0') {
            message.error(response.description);
          } else {
            message.success(response.description);
            form.resetFields();
            handleCloseSend();
          }
        },
      });
    });
  };

  close = () => {
    const { handleCloseSend, form } = this.props;
    form.resetFields();
    handleCloseSend();
  }
  renderSimpleForm() {
    const serviceTypeOptions = getDicByCodeSort(this.context.dicData, 'vehicleServiceType');
    const msgTypeOptions = getDicByCodeSort(this.context.dicData, 'vehicleMsgType');
    const { sendVisible, title, typeDisable } = this.props;
    // const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 16 },
      },
    };
    return (
      <Modal
        title={title}
        okText="保存"
        visible={sendVisible}
        onOk={this.ok}
        onCancel={this.close}
      >
        <Form
          hideRequiredMark
          style={{ marginTop: 12 }}
        >
          <FormItem
            {...formItemLayout}
            label="Service Type"
            name="serviceType"
            rules={[
              { required: true, message: '请选择' },
            ]}
          >
            <Select disabled={typeDisable} placeholder="请选择">
              {serviceTypeOptions}
            </Select>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="Message Type"
            name="messageType"
            rules={[
              { required: true, message: '请选择' },
            ]}
          >
            <Select disabled={typeDisable} placeholder="请选择">
              {msgTypeOptions}
            </Select>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="VIN"
            name="vin"
            rules={[
              { required: true, message: '请输入VIN' },
            ]}
          >
            <Input />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="消息内容"
            name="content"
            rules={[
              { required: true, message: '请输入消息内容' },
            ]}
          >
            <TextArea style={{ minHeight: 32 }} placeholder="请输入消息内容" rows={3} />
          </FormItem>
          <FormItem
            style={{ display: 'none' }}
            {...formItemLayout}
            label="eventId"
            name="eventId"
            rules={[
              { required: false, message: '' },
            ]}
          >
            <Input disabled />
          </FormItem>
          <FormItem
            style={{ display: 'none' }}
            {...formItemLayout}
            label="channelType"
            name="channelType"
            rules={[
              { required: false, message: '' },
            ]}
          >
            <Input disabled />
          </FormItem>
        </Form>
      </Modal>
    );
  }


  renderForm() {
    return this.renderSimpleForm();
  }
  render() {
    return (
      <div className={styles.tableListForm}>
        {this.renderForm()}
      </div>
    );
  }
}
